Обычная кнопка
input - вводит информацию
type - определяет тип кнопки
button - задаёт обыкновенную кнопку
value - устанавливает текстовую надпись на кнопке |
|
<input type="button"
value="Главная">
<a href="#"><input type="button"
value="Главная"></a> |
наверх
Цветная кнопка
<input type="button" value="Главная"
style="background:#cf9fff; color: #970000; font-size: 19pt;">
<a href="#"><input type="button"
style="background:#cf9fff; color: #970000; font-size: 19pt;"
value="Главная"></a>
|
|
background:#cf9fff - цвет кнопки
color: #970000 - цвет букв
ont-size: 19pt - размер шрифта |
наверх
Кнопка с рисунком
img src - вставка рисунка
width - ширина рисунка
height - высота рисунка
valign="middle" - выравнивание по вертикали
|
|
<button style="background:#8080ff;" >
<img src="ris.gif" width="20" height="20" valign="middle"> ГЛАВНАЯ </button>
<a href="#"><button style="background:#8080ff;">
<img src="ris.gif" width="20" height="20" valign="middle"> ГЛАВНАЯ</button></a> |
наверх
Кнопка, меняющая фон
<script>
function pervay(){document.bgColor='#cf9fff';}
</script>
<input type="button"
value="Главная" onclick="pervay()" >
<a href="#"><input type="button"
value="Главная" onclick="pervay()">
</a> |
|
onclick="pervay()" - срабатывает функция |
наверх
Кнопка с текстом, постоянно меняющим цвет
<script>
function h(color)
{
hn = new Array("0", "1", "2", "3", "4", "5", "6", "7", "8", "9", "A" ,"B", "C", "D", "E", "F")
if(color<0){return "00"}
else if(color>255){
return "FF"
}
else {
s = "" + hn[Math.floor(color/16)] + hn[color%16]
return s
}
}
function toH(red, green, blue){
return h(red) + h(green) + h(blue)
}
function RGB(red, green, blue){
return toH(red, green, blue)
}
var sR = 56
var sG = 256
var sB = 5
var R = 256
var G = 256
var B = 5
var b = true;
function setButtonColor(r, g, b) {
document.all["button1"].style.color=RGB(r, g, b);
}
function startChanging(){
if(b==true) {
if((R>256)||(G>256)||(B>256)) {
b=false;
}
R+=sR;G+=sG;B+=sB;
}
else {
if((R<0)||(G<0)||(B<0)) {
b=true;
}
R-=sR; G-=sG; B-=sB
}
setButtonColor(R, G, B);
setTimeout("startChanging()",100)
}
</script>
<body onload="startChanging()">
<button style="background:#ffa8a8;
font-size:20px" id="button1">
Главная</button> |
Вертикальное меню с триггером
|
<body onload="allClose()">
<script language="JavaScript" type="text/javascript">
function openMenu(node){
var subMenu = node.parentNode.getElementsByTagName("ul")[0];
subMenu.style.display == "none" ? subMenu.style.display = "block" : subMenu.style.display = "none";
}
</script>
<script language="JavaScript" type="text/javascript">
function allClose(){
var list = document.getElementById("menu").getElementsByTagName("ul");
for(var i=0;i<list.length;i++){
list[i].style.display = "none";
}
}
</script>
<style>
#menu{background:#0dffff;width:200px;list-style-type:none;padding:0;margin:0}
#menu li{border-bottom:0px solid #fff;padding:2px}
#menu li a{ color:#009726;font-family:Times New Roman; font-size:18px; text-decoration:none}
#menu li ul{border-top:2px solid #00c6c6;padding:0;margin:0;list-style-type:square}
#menu li ul li{border:0;list-style-type:square;color:#009726;list-style-position:inside}
</style> |
|
<ul id="menu">
<li><a href="#" onclick="openMenu(this);return false">Главная</a>
<ul>
<p><li><a href="#" onclick="openMenu(this);return false">Часть первая</a>
<ul>
<li> <a href="#" >Глава 1 </a></li>
<li> <a href="#" >Глава 2 </a></li>
<li> <a href="#" >Глава 3 </a></li><p>
</ul>
<li><a href="#" onclick="openMenu(this);return false">Часть вторая</a>
<ul>
<li><a href="#">Глава 4</a></li>
<li><a href="#">Глава 5</a></li>
<li><a href="#">Глава 6</a></li>
</ul>
</li>
</ul>
</li>
</ul> |
наверх
|
|
